<template>
  <div class="air">
    <el-row :gutter="20">
        <el-col :span="24" class="paddCol" >
            <el-card class="box-card achight">
              <div slot="header" class="clearfix">
                  <span :style="this.alarmstate == 0 ? '':'color:#ea2e2e'"><i class="el-icon-menu"></i> 
                    <span class="shebeiname">{{this.data.name}}</span>
                  </span>
              </div>
              <div class="temp_card"  v-if="this.typeKT == 1">
                <el-row :gutter="20">
                  <el-col :span="6" class="paddCol">
                    <el-card class="box-card">
                      <div slot="header" class="clearfix">
                        <span><i class="el-icon-menu"></i> 空调状态</span>
                      </div>
                      <div
                        :class="status == true ? 'control_icon active' : 'control_icon'"
                      > 
                        <img src="../../assets/snow.png" class />
                      </div>
                      <div class="switch"  v-if=" data.unit[32].ready == 1">
                        <span style="float: left; margin-right: 15px"> 空调开关:</span>
                        <el-switch
                          v-model="status"
                          active-color="#13ce66"
                          inactive-color="#ff4949"
                          @change="switchclick"
                        >
                        </el-switch>
                      </div>
                      <div class="wenduSet">
                        温度设定:
                        <el-input v-model="wenduValue" @focus="numFocus()" @blur="numBlur()" oninput="if(value>100)value=50;if(value<0)value=0" maxlength="3"></el-input>
                        <el-button type="button" class="save" @click="saveWd()"
                          >保存</el-button
                        >
                      </div>
                      <div class="wenduSet">
                        湿度设定:
                        <el-input v-model="shiduValue" @focus="numFocus()" @blur="numBlur()" oninput="if(value>100)value=100;if(value<0)value=0" maxlength="3"> </el-input>
                        <el-button type="button" class="save" @click="saveSd()"
                          >保存</el-button
                        >
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="12">
                    <el-card class="box-card">
                      <div slot="header" class="clearfix">
                        <span><i class="el-icon-menu"></i> 运行参数</span>
                      </div>
                      <div class="ac_menu">
                        <div class="card_padding_chart">
                          <div class="item_chart" v-if=" data.unit[4].ready == 1">
                            <p class="ac_menu_value">{{ data.unit[4].value.toFixed(1) }}</p>
                            <p class="overflowHidden">{{ data.unit[4].name }}({{ data.unit[4].flag }})</p>
                          </div>
                          <div class="item_chart" v-if=" data.unit[5].ready == 1">
                            <p class="ac_menu_value">{{ data.unit[5].value.toFixed(1) }}</p>
                            <p class="overflowHidden">{{ data.unit[5].name }}({{ data.unit[5].flag }})</p>
                          </div>
                        </div>
                        <div class="card_padding_chart">
                          <div class="item_chart" v-if=" data.unit[0].ready == 1">
                            <p class="ac_menu_value">{{ data.unit[0].value.toFixed(1) }}</p>
                            <p class="overflowHidden">{{ data.unit[0].name }}({{ data.unit[0].flag }})</p>
                          </div>
                          <div class="item_chart" v-if=" data.unit[2].ready == 1">
                            <p class="ac_menu_value">{{ data.unit[2].value.toFixed(1) }}</p>
                            <p class="overflowHidden">{{ data.unit[2].name }}({{ data.unit[2].flag }})</p>
                          </div>
                          <div class="item_chart"  v-if=" data.unit[6].ready == 1">
                            <p class="ac_menu_value">{{ data.unit[6].value.toFixed(1) }}</p>
                            <p class="overflowHidden">{{ data.unit[6].name }}({{ data.unit[6].flag }})</p>
                          </div>
                          <div class="item_chart"  v-if=" data.unit[8].ready == 1">
                            <p class="ac_menu_value">{{ data.unit[8].value.toFixed(1) }}</p>
                            <p class="overflowHidden">{{ data.unit[8].name }}({{ data.unit[8].flag }})</p>
                          </div>
                        </div>
                        <div class="card_padding_chart">
                          <div class="item_chart" v-if=" data.unit[1].ready == 1">
                            <p class="ac_menu_value">{{ data.unit[1].value.toFixed(1) }}</p>
                            <p class="overflowHidden">{{ data.unit[1].name }}({{ data.unit[1].flag }})</p>
                          </div>
                          <div class="item_chart" v-if=" data.unit[3].ready == 1">
                            <p class="ac_menu_value">{{ data.unit[3].value.toFixed(1) }}</p>
                            <p class="overflowHidden">{{ data.unit[3].name }}({{ data.unit[3].flag }})</p>
                          </div>
                          <div class="item_chart"  v-if=" data.unit[7].ready == 1">
                            <p class="ac_menu_value">{{ data.unit[7].value.toFixed(1) }}</p>
                            <p class="overflowHidden">{{ data.unit[7].name }}({{ data.unit[7].flag }})</p>
                          </div>
                          <div class="item_chart"  v-if=" data.unit[9].ready == 1">
                            <p class="ac_menu_value">{{ data.unit[9].value.toFixed(1) }}</p>
                            <p class="overflowHidden">{{ data.unit[9].name }}({{ data.unit[9].flag }})</p>
                          </div>
                        </div>
                      </div>
                      
                    </el-card>
                  </el-col>
                  <el-col :span="6">
                    <div class="temp_warning_mode">
                        <div class="temp_peak_name">
                          <i class="el-icon-message-solid"></i>
                          报警数据
                        </div>
                        <div class="temp_warning">
                          <p>
                            <span class="temp_warning_title">报警数量：</span>
                            <span class="temp_warning_data">{{ this.errorcount }}</span>
                          </p>
                          <p>
                            <span class="temp_warning_title">数值报警：</span>
                            <span class="temp_warning_data">{{ this.valueerror }}</span>
                          </p>
                          <p>
                            <span class="temp_warning_title">链路报警：</span>
                            <span class="temp_warning_data">{{ this.connecterror }}</span>
                          </p>
                        </div>
                      </div>
                  </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 20px">
                  <el-col :span="6" class="paddCol">
                    <el-card class="box-card" style="height: 445px">
                      <div slot="header" class="clearfix">
                        <span><i class="el-icon-menu"></i> 运行状态</span>
                      </div>
                      <div class="scroll_show">
                        <div class="war_table_modal ul">
                          <div class="air_table air_table1" :key="item.index" v-for="(item, index) in runStatusData">
                            <span class="ups_name">{{ item.name }}</span>
                            <div class="ups_name2">{{ item.value  == 1 ? item.alarmhighname : item.alarmlowname }}</div>
                          </div>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="12" class="paddCol">
                    <el-card class="box-card" style="height: 445px">
                      <div slot="header" class="clearfix">
                        <span><i class="el-icon-menu"></i> 报警状态</span>
                      </div>
                      <div class="scroll_show">
                        <div class="war_table_modal ul">
                          <div class="air_table" :key="item.index" v-for="(item, index) in warningData">
                            <span class="ups_name">{{ item.name }}</span>
                            <div class="ups_name2">{{ item.value  == 1 ? item.alarmhighname : item.alarmlowname }}</div>
                          </div>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="6">
                    <div class="temp_time_mode">
                        <div class="temp_peak_name">
                          <i class="el-icon-time"></i>
                          时间统计
                        </div>
                        <div class="temp_time">
                          <div class="temp_time_line">
                            <p class="temp_warning_title">首次上线：</p>
                            <p class="temp_time_year">{{ this.firstconnecttimeYear }} </p> 
                            <p class="temp_time_hour">{{ this.firstconnecttimeHour}}</p>
                          </div>
                          <div class="temp_time_line">
                            <p class="temp_warning_title">最近上线：</p>
                            <p class="temp_time_year">{{ this.connecttimeYear }} </p>
                            <p class="temp_time_hour">{{ this.connecttimeHour }}</p>
                          </div>
                          <div class="temp_time_line">
                            <p class="temp_warning_title">累计时长：</p>
                            <p class="temp_time_h"> {{this.totaltime}} </p> <span class="temp_time_s"> h</span>
                          </div>
                        </div>
                      </div>
                  </el-col>
                </el-row>
              </div>
              <div class="ac_card" v-if="this.typeKT == 0">
                <el-row :gutter="24">
                    <el-col :span="16" class="paddCol">
                      <el-card class="box-card">
                          <div class="control_xg">
                              <div class="cotrol_xg_title">制冷状态：</div>
                              <div :class="[isActive ? 'control_xg_img1':'control_xg_img1 xg_air_active']"></div>
                              <div class="cotrol_xg_title">制热状态：</div>
                              <div :class="[isActive2 ? 'control_xg_img2':'control_xg_img2 xg_air_active']"></div>
                              <p style="clear:both"></p>
                          </div>
                          <div class="xg_normal_air">
                              <p class="xg_airzt">开机状态:</p>
                              <div class="btn_wrap" @click="airCool(0)">
                                  <div class="btn">
                                          制冷开机
                                  </div>
                              </div>
                              <div class="btn_wrap" @click="airHot(0)">
                                  <div class="btn">
                                          制热开机
                                  </div>
                              </div>
                          </div>
                          <div class="xg_normal_air">
                              <p class="xg_airzt">关机状态:</p>
                              
                              <div class="btn_wrap" @click="airCool(1)">
                                  <div class="btn">
                                          制冷关机
                                  </div>
                              </div>
                              <div class="btn_wrap" @click="airHot(1)">
                                  <div class="btn">
                                          制热关机
                                  </div>
                              </div>
                          </div>

                      </el-card>
                    </el-col>
                    <el-col :span="8" class="paddCol">
                      <div class="temp_time_mode">
                        <div class="temp_peak_name">
                          <i class="el-icon-time"></i>
                          时间统计
                        </div>
                        <div class="temp_time">
                          <div class="temp_time_line">
                            <p class="temp_warning_title">首次上线：</p>
                            <p class="temp_time_year">2021-10-03 </p> 
                            <p class="temp_time_hour">28:34</p>
                          </div>
                          <div class="temp_time_line">
                            <p class="temp_warning_title">最近上线：</p>
                            <p class="temp_time_year">2023-02-20 </p>
                            <p class="temp_time_hour">09:27</p>
                          </div>
                          <div class="temp_time_line">
                            <p class="temp_warning_title">累计时长：</p>
                            <p class="temp_time_h">90 </p> <span class="temp_time_s"> h</span>
                          </div>
                        </div>
                      </div>
                    </el-col>
                  </el-row>  
              </div>
            </el-card>
        </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["msg"],
  data() {
    return {
      alarmstate:0,//在线离线
      timeGetData:'',//接口方法的定时器
      data: "", //当前设备数据
      dataor:1,//判断接口是否成功，1表示有返回成功，0表示失败，3之内无返回就置0表示失败
      typeKT:0,//空调类型
      // 精密空调所需变量
      wenduValue: "", //温度设定
      shiduValue: "", //湿度设定
      status: "", //空调开关状态
      serial: "",
      runStatusData: "",
      warningData: "",
      open:0,
      // 普通空调所需变量
      isActive: '',
      isActive2: '',
      //属性数据
      firstconnecttimeYear:'',//首次上线年月日
      firstconnecttimeHour:'',//首次上线时分
      connecttimeYear:'',//最近上线年月日
      connecttimeHour:'',//最近上线时分
      totaltime:0,//累计运行时间
      errorcount:0,//报警总数量
      valueerror:0,//数值报警
      connecterror:0,//链路报警
      localname:'',//本地储存名称
    };
  },
  mounted() {
  },
  created() {
    // 判断是否是直接访问当前设备页面
    const url = window.location.href;
    const over = /#.*/; // 正则表达式用于匹配URL中的路径部分
    const pathMatch = url.match(over); // 匹配URL中的路径部分
    if (pathMatch && pathMatch[0].startsWith('#/overview')) {
      this.localname = "当前设备编号"
    }else if(pathMatch && pathMatch[0].startsWith('#/overview2')){
      this.localname = "6.0展示设备卡片"
    }
    this.getData(JSON.parse(localStorage.getItem(this.localname)))
    this.getDataStart()
  },
  methods: {
    //重新定时走接口
    getDataStart(){
      this.$nextTick(() => {
          this.timeGetData = setInterval(() => {
            if(this.dataor == 0){ //接口失败提示
              this.$message({
                message: '服务器访问失败',
                type: 'error',
                duration: 1000
              });
            }
            this.getData(JSON.parse(localStorage.getItem(this.localname)))
            this.dataor = 0
          }, 3000); 
      })
    },
    //暂停走接口
    getDataStop(){
      clearInterval(this.timeGetData);
      this.timeGetData = null;
    },
    getData(info){
      if(info.uid == null || info.uid == "null"){//清空缓存第一次进入时找不到info.uid，页面为空页面的处理
        info.uid = 0
      }
      var params = {
          "getdevinfo":[
            {
              "uid": info.uid,
              "type": info.type,
              "addr": info.addr,
              "unittype":"id-name-ready-value-flag-max-min-alarmhighname-alarmlowname"
            }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
        this.dataor = 1// 接口成功置1
        if(res.data.getdevinfo == undefined){ //数据返回不全失败提示
          this.$message({
            message: '服务器访问失败',
            type: 'error',
            duration: 1000
          });
        }else{
          this.data = res.data.getdevinfo[0];
          this.alarmstate = res.data.getdevinfo[0].alarmstate
          // 上次上线时间
          this.firstconnecttimeYear = this.formatDate(this.data.firstconnecttime*1000, 'YYYY-MM-DD')
          this.firstconnecttimeHour = this.formatDate(this.data.firstconnecttime*1000, 'H:m')
          // 最近上线时间
          this.connecttimeYear = this.formatDate(this.data.connecttime*1000, 'YYYY-MM-DD')
          this.connecttimeHour = this.formatDate(this.data.connecttime*1000, 'H:m')
          //累计运行时间 拿到的分钟转成小时
          this.totaltime = (this.data.totaltime/60).toFixed(0)
          //故障累计总条数
          this.errorcount = this.data.errorcount
          // 数据报警累计条数
          this.valueerror = this.data.valueerror
          //离线故障累计条数
          this.connecterror = this.data.connecterror
          console.log(info.uid)
          // this.data.unit[31].value = 1
          if(this.data.unit[31].value == 0){
            this.typeKT = 0
          }else if(this.data.unit[31].value == 1){
            this.typeKT = 1
          }
          // 精密空调开关机下发34号寄存器，状态返回在37bit14寄存器（此逻辑为后台逻辑，前端只通过34号寄存器做下发和返回展示）
            // console.log('接口：'+this.status)
            this.wenduValue = this.data.unit[33].value.toFixed(0);
            this.shiduValue = this.data.unit[34].value.toFixed(0);
            var arr = [];
           
            for (let i = 35; i < 48; i++) {
              if (this.data.unit[i].ready === 1) {
                arr.push(this.data.unit[i]);
              }
            }
            this.runStatusData = arr;
            
            
            var arr2 = [];
            for (let i = 48; i < 80; i++) {
              if (this.data.unit[i].ready === 1) {
                arr2.push(this.data.unit[i]);
              }
            }
            this.warningData = arr2;

            // 普通空调数据
            this.isActive2 = this.data.unit[30].value == 0 ? false : true;
            this.isActive = this.data.unit[32].value == 0 ? false : true;
          if(this.open == 0){
            this.status = this.data.unit[32].value == 0 ? false : true;
          }
        }
      })
    },
    //精密空调温湿度修改的触发，接口暂停
    numFocus() {
        console.log('点击')
        //  console.log('点击后，this.run：'+this.run)
        this.getDataStop()
    },
    numBlur() {
        console.log('消失')
        this.getDataStart()
    },
    //普通空调 修改状态
    airHot(a){
      if(a==0){
          this.isActive2 = true;
      }if(a==1){
          this.isActive2 = false;
      }
      var hot = this.isActive2 == true ? 1 : 0;
      var params = {
          "setdevinfo":[
              {
                  "uid": this.info.uid,
                  "type": this.info.type,
                  "addr": this.info.addr,
                  "unit":[
                    {
                      id: 30,
                      value: hot
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params).then((res)=>{
        this.data.unit[30].value = hot
      })
    },
    airCool(a){
        //this.isActive = !this.isActive;
        if(a==0){
            this.isActive = true;
        }if(a==1){
            this.isActive = false;
        }
        var cool = this.isActive == true ? 1 : 0;
        var params = {
          "setdevinfo":[
              {
                  "uid": this.info.uid,
                  "type": this.info.type,
                  "addr": this.info.addr,
                  "unit":[
                    {
                      id: 32,
                      value: cool
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
        this.$http.post(this.$baseUrl, params).then((res)=>{
          this.data.unit[32].value = cool
        })
    },
    // 数据下发 => 空调开关状态控制
    switchclick(data) {
      this.getDataStop()
      this.open = 1
      var st = this.status == true ? 1 : 0;
      this.data.unit[32].value = st;
      this.status = this.data.unit[32].value == 0 ? false : true;
      var params = {
          "setdevinfo":[
              {
                  "uid": this.info.uid,
                  "type": this.info.type,
                  "addr": this.info.addr,
                  "unit":[
                    {
                      id: 32,
                      value: st
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params).then((res)=>{
        // this.status = st == 1 ? true : false
        setTimeout(()=>{
          this.open = 0
        },3000)
      })
      this.getDataStart()
    },
    //温度设定
    saveWd() {
      this.getDataStop()
      this.data.unit[33].value = this.wenduValue;
      var params = {
          "setdevinfo":[
              {
                  "uid": this.info.uid,
                  "type": this.info.type,
                  "addr": this.info.addr,
                  "unit":[
                    {
                      id: 33,
                      value: parseInt(this.wenduValue)
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl,params).then((res)=>{
      })
      this.getDataStart()
    },
    //湿度设定
    saveSd() {
      this.getDataStop()
      this.data.unit[34].value = this.shiduValue;
      var params = {
          "setdevinfo":[
              {
                  "uid": this.info.uid,
                  "type": this.info.type,
                  "addr": this.info.addr,
                  "unit":[
                    {
                      id: 34,
                      value: parseInt(this.shiduValue)
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl,params).then((res)=>{
      })
      this.getDataStart()
    },
  },
  // 清除定时器
    beforeDestroy() {
        clearInterval(this.timeGetData);
        this.timeGetData = null;
    },
};
</script>

<style scoped>
.el-card {
  background: none;
  color: #fff;
  border: 1px solid rgba(89, 129, 165, 0.4);
}
/deep/ .el-card__header {
  background: rgba(89, 129, 165, 0.2);
  padding: 16px 20px;
  border-bottom: none;
}
.ac_card .el-card {
  background: none;
  color: #fff;
  /* background: #0000002b; */
  border-radius: 10px;
  margin-top: 87px;
  padding-left: 180px;
}
/deep/ .temp_card .el-card__header {
  background: rgba(89, 129, 165, 0);
  padding: 20px 30px;
  padding-bottom: 0px;
  border-bottom: none;
}
/deep/ .temp_card .el-card {
  background: none;
  color: #fff;
  border: none;
  background: #0000002b;
  border-radius: 10px;
}
.box-card {
  /* overflow: hidden; */
}
.ac_card{
  width: 100%;
}
.achight{
  height: 930px;
}
.temp_card{
  height: 850px;
}
.clearfix{
  font-size: 18px;
}
.shebeiname{
  font-weight: bold;
}

.control_icon {
  text-align: center;
  margin-bottom: 20px;
}
.control_icon img {
  width: 80px;
  height: 80px;
}
.switch {
  display: inline-block;
  width: 100%;
  margin-left: 90px;
}
.el-switch {
  margin-left: 10px;
}
.control_icon.active img {
  animation: turn 3s linear infinite;
}
@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
.wenduSet {
  padding: 20px 0px 10px 0px;
  margin-left: 30px;
}
/deep/.wenduSet .el-input__inner {
  background: none;
  outline: none;
  height: 40px;
  line-height: 40px;
  border: 1px solid rgba(89, 129, 165, 0.4);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  text-indent: 10px;
  margin-right: 15px;
  width: 100px;
  padding: 0px;
}
/deep/ .el-input {
  margin-left: 10px;
  display: inline;
  width: 100px;
}
.save {
  background: rgba(89, 129, 165, 0.6);
  border: 1px solid rgba(89, 129, 165, 0.6);
  color: #fff;
}
.card_padding_chart {
  padding: 7px 0;
  margin-bottom: 30px;
}
.box-card {
  min-height: 360px;
  /* overflow: hidden; */
}
.war_table_modal {
  width: 100%;
  max-height: 370px;
  overflow: scroll;
  display: flex;
  flex-wrap: wrap; 
  margin-left: 20px;
}
/*整个滚动条样式 当width:0;或display:none;时，滚动条不显示*/
.war_table_modal::-webkit-scrollbar {  
   display:none;
}

.air_table{
  width: 49%;
  line-height: 40px;
  color: #0bfeff !important;
}
.air_table1{
  width: 99%;
}
.war_item {
  width: 100%;
  display: flex;
  line-height: 30px;
}
.war_table_modal .item {
  display: inline-block;
  flex: 1;
}
.air_table span {
  width: 150px;
  /* width: 100px; */
  display: block;
  float: left;
  font-size: 16px;
  margin-right: 20px;
  color: #fff;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 普通空调样式 */
.btn_wrap{
  width: 300px;
display: inline-block;
}
.btn_wrap .btn{
    width: 210px;
    height:60px;
    border: 1px solid #00fcff;
    /* background: rgba(0, 0, 0, 0.3); */
    margin: 0 auto;
    text-align: center;
    line-height: 60px;
    font-size: 22px;
    cursor: pointer;
    border-radius: 30px;
}
.xg_normal_air .btn{
    width: 180px;
    height:50px;
    border: 1px solid #00fcff;
    /* background: rgba(0, 0, 0, 0.3); */
    margin: 0 auto;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 30px;
}
.xg_airzt{
    padding-left: 25px;
    margin: 0px 0px 20px 0px;
    font-size: 20px;
    letter-spacing: 1px;
}
.xg_normal_air{
    margin:  35px 0px 70px 0px;
}
.control_xg{
    padding: 35px 20px;
}
.cotrol_xg_title{
    width: 150px;
    float: left;
    line-height: 64px;
    padding-left: 5px;
    font-size: 20px;
    letter-spacing: 1px;
}
.control_xg_img1{
    width: 60px;
    height: 60px;
    margin-right: 80px;
    float: left;
    /* background: #00fcff; */
    background-image: url(../../assets/icon_snow.png);
    background-size: 100% 100%;
}
.control_xg_img2{
    width: 60px;
    height: 60px;
    float: left;
    /* background: #00fcff; */
    background-image: url(../../assets/sun.png);
    background-size: 100% 100%;
}
.xg_air_active{
    filter: grayscale(100%);
    filter: gray;
    opacity: 0.7;
}
.lixian2 span{
    border: 3px solid rgb(185, 77, 77);
    background: red;
}
.lixian2{
  color: red;
}
/deep/ .air_table span.ups_name{
  width: 140px !important;
  margin-right: 20px;
}
.ups_name2{
  width: 140px !important;
  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 报警 */
.temp_warning_mode{
  width: 365px;
  height: 360px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 10px;
  background: #0000002b;
  margin-right: 20px;
}
.temp_peak_name{
  width: 100%;
  font-size: 18px;
  margin-left: 30px;
}
.temp_warning{
  margin-top: 45px;
  margin-left: 70px;
}
.temp_warning p{
  margin-bottom: 50px;
}
.temp_warning_data{
  font-family: electronicFont;
  font-size: 34px;
  color: #ffb50b;
}
/* 运行参数 */
.ac_menu{
  height: 267px;
}
.ac_menu_value{
  font-size: 22px;
  color: cornflowerblue;
  margin-bottom: 5px;
}
/* 在线时间 */
.temp_time_mode{
  width: 380px;
  height: 443px;
  padding-top: 20px;
  border-radius: 10px;
  background: #0000002b;
  margin-bottom: 20px;
}
.temp_time{
  margin-top: 60px;
  margin-left: 40px;
}
.temp_time_line{
  margin-bottom: 90px;
  position: relative;
  top: 11px;
  display: flex;
}
.temp_time .temp_warning_title{
  width: 90px;
}
.temp_time_year{
  width: 160px;
  font-family: electronicFont;
  font-size: 28px;
  color: #5eceff;
}
.temp_time_hour{
  width: 65px;
  font-family: electronicFont;
  font-size: 28px;
  color: #5eceff;
}
.temp_time_h{
  font-family: electronicFont;
  font-size: 28px;
  color: #5eceff;
  position: relative;
  top: -5px;
}
.temp_time_s{
  color: #5eceff;
  margin-left: 5px;
}


/* 普通空调在线时间 */
.ac_card .temp_time_mode{
  width: 400px;
  height: 540px;
  /* margin: 0 auto; */
  padding-top: 30px;
  border-radius: 10px;
  background: #0000002b;
  margin-bottom: 20px;
  margin-top: 90px;
  margin-left: 50px;
}
.ac_card .temp_peak_name{
  width: 100%;
  font-size: 22px;
  margin-left: 20px;
}
.ac_card .temp_time{
  margin-top: 80px;
  margin-left: 25px;
}
.ac_card .temp_time_line{
  margin-bottom: 90px;
  position: relative;
  top: 11px;
  display: flex;
  font-size: 20px;
}
.ac_card .temp_time{
  margin-right: 30px;
  color: #d4d3d3;
}
.ac_card .temp_time .temp_warning_title{
  width: 110px;
}
.ac_card .temp_time_year{
  width: 150px;
  font-family: electronicFont;
  font-size: 28px;
  color: #5eceff;
}
.ac_card .temp_time_hour{
  width: 40px;
  font-family: electronicFont;
  font-size: 28px;
  color: #5eceff;
}
.ac_card .temp_time_h{
  font-family: electronicFont;
  font-size: 35px;
  color: #5eceff;
  position: relative;
  top: -5px;
}
.ac_card .temp_time_s{
  color: #5eceff;
  margin-left: 5px;
}
</style>